<template>
	<view class="w-form-timePicker" hover-class="w-click-hover" v-if="!readonly">
		<uni-datetime-picker class="w-form-input" :border="false" :type="type" :clear-icon="false" v-model="_value"/>
		<uni-icons type="right" :size="20" color="#999999"></uni-icons>
	</view>
	<view class="w-form-input-rv" v-else>
		<text style="line-height:70rpx">{{_value[0]}} ~ {{_value[1]}}</text>
	</view>
</template>

<script setup>
	import {computed} from 'vue'
	
	const props = defineProps({
		formProps: {
			type: Object,
			default: () => {
				return {}
			}
		},
		modelValue: {
			type: Array,
			default: () => {
				return []
			}
		},
		readonly: Boolean
	})
	
	const _value = computed({
		get() {
			return props.modelValue
		},
		set(val) {
			emits('update:modelValue', val)
		}
	})
	
	const type = computed(() => {
		return props.formProps.format?.length > 10 ? 'datetimerange' : 'daterange'
	})
	
	const emits = defineEmits(['update:modelValue'])
	
</script>
<style lang="less" scoped>
	.w-form-timePicker {
		display: flex;
		align-items: center;
	}
</style>